<!DOCTYPE html>
<html>
	<head>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#mycanvas{
				display: block;
				background: #ccc;
			}
		</style>
	</head>
	<body>
		<canvas id="mycanvas"></canvas>
	</body>
	
	<script>
		//获取canvas
		let canvas = document.getElementById('mycanvas');
		//获取上下文
		let ctx = canvas.getContext('2d');
		
		//画布尺寸
		canvas.width = document.documentElement.clientWidth;
		canvas.height = document.documentElement.clientHeight;
		
		//虚线框
		ctx.setLineDash([14,12]);
		//起始偏移量
		ctx.lineDashOffset = 10;
		ctx.strokeRect(40,40,400,200);
		
		//绘制线条
		// ctx.beginPath();
		// ctx.moveTo(100,100);
		// ctx.lineTo(200,200);
		// ctx.lineTo(300,100);
		// // 线粗细
		// ctx.lineWidth = 30;
		// // 线末端形状
		// ctx.lineCap = "round"
		// // 线交叉形状
		// ctx.lineJoin="round";
		// ctx.stroke();
	</script>
</html>
